<template>
  <div class="address-selector">
    <div class="current-address" @click="showAddressList">
      <i class="material-icons">location_on</i>
      <span class="address-text">{{ currentAddress }}</span>
      <i class="material-icons">expand_more</i>
    </div>

    <!-- 地址选择弹窗 -->
    <div class="address-modal" v-if="isModalVisible">
      <div class="modal-content">
        <div class="modal-header">
          <h3>选择收货地址</h3>
          <i class="material-icons close-icon" @click="closeModal">close</i>
        </div>
        
        <div class="search-box">
          <i class="material-icons">search</i>
          <input type="text" v-model="searchText" placeholder="搜索地址">
        </div>

        <div class="address-list">
          <div class="address-item" 
               v-for="(address, index) in filteredAddresses" 
               :key="index"
               @click="selectAddress(address)">
            <div class="address-info">
              <h4>{{ address.name }} {{ address.phone }}</h4>
              <p>{{ address.address }}</p>
            </div>
            <i class="material-icons" v-if="address.isDefault">check</i>
          </div>
        </div>

        <div class="add-address" @click="toAddAddress">
          <i class="material-icons">add</i>
          <span>新增收货地址</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressSelector',
  data() {
    return {
      isModalVisible: false,
      searchText: '',
      currentAddress: '天津大学（北洋园校区）',
      addresses: [
        {
          name: '张三',
          phone: '13800138000',
          address: '天津大学（北洋园校区）',
          isDefault: true
        },
        {
          name: '李四',
          phone: '13900139000',
          address: '天津大学（卫津路校区）',
          isDefault: false
        },
        {
          name: '王五',
          phone: '13700137000',
          address: '天津大学（津南校区）',
          isDefault: false
        }
      ]
    }
  },
  computed: {
    filteredAddresses() {
      if (!this.searchText) return this.addresses;
      return this.addresses.filter(address => 
        address.address.toLowerCase().includes(this.searchText.toLowerCase()) ||
        address.name.includes(this.searchText)
      );
    }
  },
  methods: {
    showAddressList() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
      this.searchText = '';
    },
    selectAddress(address) {
      this.currentAddress = address.address;
      this.closeModal();
      // 触发地址变更事件
      this.$emit('address-changed', address);
    },
    toAddAddress() {
      this.$router.push('/addUserAddress');
    }
  }
}
</script>

<style scoped>
.address-selector {
  position: relative;
}

.current-address {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--md-sys-color-on-primary);
}

.address-text {
  font-size: 16px;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  font-size: 18px;
  color: #333;
}

.close-icon {
  cursor: pointer;
  color: #666;
}

.search-box {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #f5f5f5;
  margin: 8px 16px;
  border-radius: 8px;
}

.search-box input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-size: 14px;
}

.address-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.address-item {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.address-item:last-child {
  border-bottom: none;
}

.address-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.address-info p {
  font-size: 14px;
  color: #666;
}

.add-address {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  border-top: 1px solid #eee;
}

.add-address span {
  font-size: 16px;
}
</style> 